<template>
  <div class="classify">
    <div class="category">
      <div class="category_bar">
        <div class="findword">
        </div>
      </div>
    </div>
  </div>
  <div class="sort">
    <div class="list">
      <p @click="sortDefault">
      <div>推荐</div>
      </p>
      <p @click="sortByDate">
      <div>新品</div>
      </p>
      <p @click="sortByPrice">
      <div>价格</div>
      </p>

    </div>
  </div>
  <div class="goods_item center">
    <div class="main center" style="left: 40px;">

      <!-- 搜索的数据为空的话 -->
      <el-empty :image-size="200" v-if="goods.searchGoodsInfo == ''" />

      <div class="item_card_frame"
        v-for="item in goods.searchGoodsInfo.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :key="index">
        <router-link :to="{ path: '/showdetail', query: { goodsId: item.goodsId } }">
          <div class="item_card"><img :src="item.goodsCoverImg" :title="item.goodsIntro">
          </div>
          <div class="item_brand">{{ item.goodsName.slice(0, 20) }}</div>
          <div class="item_sub_intro">{{ item.goodsIntro.slice(0, 25) }}</div>
          <div class="item_price">{{ item.sellingPrice }}元</div>
        </router-link>
      </div>
      <div class="clear"></div>
    </div>
    <div class="pages">
      <div class="page_wrap">
        <span class="page_span1">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="goods.searchGoodsInfo.length">
          </el-pagination>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Store from '../../stores/Store.js'
export default {
  data() {
    return {
      goods: Store(),
      currentPage: 1,
      total: 0,
      pageSize: 10
    }
  },
  methods: {
    sortByPrice() {
      this.goods.searchGoodsInfo.sort((a, b) => a.sellingPrice - b.sellingPrice);
    },
    sortByDate() {
      this.goods.searchGoodsInfo.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
    },
    sortDefault() {
      if (this.goods.from == 1) {
        axios.post('http://localhost:8080/goods/searchGoodsByCategory/' + this.goods.categoryId).then(resp => {
          this.goods.searchGoodsInfo = resp.data

        })
      } else {
        axios.post('http://localhost:8080/goods//searchGoods/' + this.goods.searchKey).then(resp => {
          this.goods.searchGoodsInfo = resp.data
        })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
}
</script>

<style scoped></style>